<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华为手机【报价 价格 大全 怎么样】_华为商城</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/goodList.css">
    <link rel="stylesheet" type="text/css" href="commonCss/nav.css">
    <link rel="stylesheet" type="text/css" href="commonCss/footer.css">
    <link rel="stylesheet" type="text/css" href="commonCss/fixedMenu.css">
    <link rel="shortcut icon" href="img/index/favicon.ico">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/goodsList.js"></script>
    <script>
        $(function () {

            var obj = localStorage.getItem("user");
            if(obj != null){
                //将对象转为js对象
                var user = JSON.parse(obj);
                //向主页的登录按钮追加登录成功后的展示信息
                $("#show_userinfo").append(user.user_tel);
                $("#show_userinfo").after("<a href='javascript:;' id='logout'>退出</a>");
            }else{
                $("#show_userinfo").append("请登录")
            }

            //退出按钮绑定点击事件
            $("#logout").click(function (){
                //清除所有的账户信息
                localStorage.clear();
                //刷新
                window.location.reload();
            })

            $('#phoneBox').children().remove();
            //手机专栏动态获取--后端
            $.ajax({
                url:"/product/findProductInfo",
                type:"get",
                data:{categories_id:4},
                dataType:"json",
                success:function (res){
                    $.each(res.data,function (index,item){
                        var goodsStr =
                            `<li class="phonesList">
                                <a href="/goodsDetails.html?id=${item.product_id}" title="">
                                <img src="${item.product_image_url}" alt="">
                                <p class="photoName">
                                ${item.product_title}</p>
                                <p class="photoPrice">￥${item.product_unit_price}</p>
                                </a>
                                </li>`;
                        $('#phoneBox').append(goodsStr);
                    })
                }
            })
        })

    </script>
</head>
<body>
<header id="header" class="t">
    <nav id="navTop" class="t">
        <div id="navTopC" class="c">
            <ul id="navTopLeft" class="l">
                <li class="topLinks" id="indexPage"><a href="index.html">首页</a></li>
                <li class="topLinks"><a href="">华为官网</a></li>
                <li class="topLinks"><a href="">荣耀官网</a></li>
                <li class="topLinks"><a href="">花粉俱乐部</a></li>
                <li class="topLinks"><a href="">V码(优购码)</a></li>
                <li class="topLinks"><a href="">企业购</a></li>
                <li class="topLinks"><a href="">Select Region</a></li>
                </li>
                <li class="topLinks" id="moreWonderful">
                    <div class="topNavDropdown" id="moreWonderfulBox">
                        <a class="topNavDropdownLink" href="">更多精彩</a>
                        <ul class="mySecondMemu" id="moreWonderfulMemu">
                            <li class="wondefulLink myLinks"><a href="">EMUI</a></li>
                            <li class="myLinks wondefulLink"><a href="">应用市场</a></li>
                            <li class="myLinks wondefulLink"><a href="">华为终端云空间</a></li>
                            <li class="myLinks wondefulLink"><a href="">开发者联盟</a></li>
                        </ul>
                    </div>
                </li>
            </ul>

            <ul id="navTopRight" class="r">
                <li id="login" class="topLinks"><a  href="login.html" id="show_userinfo"></a></li>
                <li id="register" class="topLinks"><a href="register.html">注册</a></li>
                <li class="topLinks"><a href="">我的订单</a></li>
                <li class="topLinks">
                    <div class="topNavDropdown">
                        <a class="topNavDropdownLink" href="">客户服务</a>
                        <ul class="mySecondMemu" id="clientMemu">
                            <li class="myLinks serviseLink"><a href="">服务中心</a></li>
                            <li class="myLinks serviseLink"><a href="">联系客服</a></li>
                        </ul>
                    </div>
                </li>
                <li class="topLinks">
                    <div class="topNavDropdown">
                        <a class="topNavDropdownLink" href="">网站导航</a>
                        <div class="mySecondMemu siteNavLink">
                            <div>
                                <ul>
                                    <li><img src="img/index/indexLogo.png" alt=""></li>
                                    <li class="myLinks indexText"><a href="">商城首页</a></li>
                                </ul>
                            </div>
                            <div>
                                <p class="myTitle">频道</p>
                                <ul>
                                    <li class="myLinks l"><a href="">华为专区</a></li>
                                    <li class="myLinks r rightText"><a href="">荣耀专区</a></li>
                                    <li class="myLinks l"><a href="">企业购</a></li>
                                </ul>
                            </div>
                            <div>
                                <p class="myTitle">产品</p>
                                <ul>
                                    <li class="myLinks l"><a href="">手机</a></li>
                                    <li class="myLinks r rightText"><a href="">智能家居</a></li>
                                    <li class="myLinks l"><a href="">平板&笔记本</a></li>
                                    <li class="myLinks r rightText"><a href="">通用配件</a></li>
                                    <li class="myLinks l"><a href="">智能穿戴</a></li>
                                    <li class="myLinks r rightText"><a href="">专属配件</a></li>
                                </ul>
                            </div>

                            <div>
                                <p class="myTitle">增值服务</p>
                                <ul>
                                    <li class="myLinks l"><a href="">以旧换新</a></li>
                                    <li class="myLinks r rightText"><a href="">礼品包装</a></li>
                                    <li class="myLinks l"><a href="">补购保障</a></li>
                                </ul>
                            </div>


                            <div>
                                <p class="myTitle">会员</p>
                                <ul>
                                    <li class="myLinks"><a href="">会员频道</a></li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </li>
                <li class="topLinks">
                    <div class="topNavDropdown">
                        <a class="topNavDropdownLink" href="">手机版</a>
                        <ul class="mySecondMemu phoneVesion">
                            <li class="myLinks"><a href=""><img src="img/index/navPhone01.png" alt=""></a></li>
                            <li class="myLinks"><a href=""><img src="img/index/navPhone02.png" alt=""></a></li>
                            <li class="myLinks"><a href=""><img src="img/index/navPhone03.png" alt=""></a></li>
                        </ul>
                    </div>
                </li>
                <li id="buyCarBox" class="topLinks">
                    <a href="" id="buyCarLink">
                        购物车(0)
                    </a>
                    <p class="mySecondMemu myBuyCar">
                        <img src="img/index/byCar.png" alt="">
                    </p>
                </li>
            </ul>
        </div>
    </nav>
    <nav id="navBottom" class="t">
        <div id="navBottomC" class="c">
            <section id="navBottomLeft">
                <a href="#" title="Vmall.com-华为商城">
                    <img id="indexLogo" src="img/index/logo.png" alt="">
                </a>
                <ul id="navBottomLinkBox">
                    <li id="phoneSelft" class="navBottomLinks">
                        <a href="">手机</a>
                    </li>
                    <li class="navBottomLinks"><a href="goodsList.html">笔记本&平板</a></li>
                    <li class="navBottomLinks"><a href="">智能穿戴</a></li>
                    <li class="navBottomLinks"><a href="">智能家居</a></li>
                    <li class="navBottomLinks"><a href="">通用配件</a></li>
                    <li class="navBottomLinks"><a href="">专属配件</a></li>
                </ul>
            </section>
            <section id="search">
                <input type="text" id="searchBox">
                <a href="" title=""><i id="searchBtn"></i></a>
                <a href="" title="" id="firstSearchText">荣耀V20</a>
                <a href="" title="" id="secondSearchText">nova4</a>
                <div class="searchHistory">
                    <p>热门搜索</p>
                    <ul>
                        <li>华为20i</li>
                        <li>HUAWEI P20</li>
                        <li>nova 5</li>
                        <li>nova</li>
                    </ul>
                </div>
            </section>
        </div>
        <!-- 二级菜单 -->
        <div id="phoneSecondMenu" class="t">
            <div id="phoneSecondMenuC" class="c">
                <div id="phoneSecondMenuNav">
                    <ul id="phoneNavBox">
                        <li class="photoNavText"><a href="">全部手机></a></li>
                        <li class="photoNavText"><a href="">荣耀</a></li>
                        <li class="photoNavText"><a href="">HUAWEI P系列</a></li>
                        <li class="photoNavText"><a href="">荣耀畅玩系列</a></li>
                        <li class="photoNavText"><a href="">HUAWEIMATE系列</a></li>
                        <li class="photoNavText"><a href="">HUAWEI navo系列</a></li>
                        <li class="photoNavText"><a href="">华为畅享系列</a></li>
                        <li class="photoNavText"><a href="">HUAWEI 麦芒系列</a></li>
                        <li class="photoNavText"><a href="">移动4G+专区</a></li>
                    </ul>
                </div>

                <ul id="phoneBox">
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone01.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone02.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone03.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone04.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone05.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone06.jpg" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="phonesList">-->
<!--                        <a href="" title="">-->
<!--                            <img src="img/goodsList/secondPhone07.png" alt="">-->
<!--                            <p class="photoName">-->
<!--                                HUAWEI Mate 20</p>-->
<!--                            <p class="photoPrice">￥2399</p>-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>

            </div>
        </div>

    </nav>
</header><!-- /header -->

<main id="main" class="t">
    <div id="mainC" class="c">
        <section id="nowPosition">
            <a href="index.html" title="">首页</a>
            <span>&nbsp;>&nbsp;&nbsp;笔记本 & 平板</span>
        </section>

        <section id="goodsProperty">
            <div id="goodsSort">
                <ul class="goodsPropertyText">
                    <li class="goodsPropertyTitle">分类:</li>
                    <li><a id="all" href="">全部</a></li>
                    <li><a href="">平板电脑</a></li>
                    <li><a href="">笔记本电脑</a></li>
                    <li><a href="">笔记本配件</a></li>
                </ul>
            </div>
            <div id="goodsOrder">
                <ul class="goodsPropertyText goodsOrderText">
                    <li class="goodsPropertyTitle">排序:</li>
                    <li id="upTimeBox">
                        <a id="upTime" href="">上架时间
                            <i id="upTimeIcon" class="selectSymbol"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">价格
                            <i id="price" class="selectSymbol"></i>
                        </a>
                    </li>
                    <li>
                        <a href="">评价数
                            <i id="evaluationNum" class="selectSymbol"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </section>

        <section id="goodsList">
        </section>

        <section id="pageBtn">
            <ul id="pageBtnBox">
                <li class="btns">|<</li>
                <li class="btns"><</li>
                <li class="seletedPageNum pageNum"><a href="" title="">1</a></li>
                <li class="pageNum"><a href="" title="">2</a></li>
                <li class="btns">></li>
                <li class="btns" id="lastBtn">>|</li>
            </ul>
        </section>


    </div>
</main>

<footer id="footer" class="t">
    <section id="slogan" class="c">
        <ul id="sloganBox">
            <li class="sloganInf"><a href="">
                <i class="sloganIcon"></i>
                <span class="sloganText">百强企业 品质保证</span>
            </a></li>
            <li class="sloganInf"><a href="">
                <i class="sloganIcon"></i>
                <span class="sloganText">7天退货品 15天换货</span>
            </a></li>
            <li class="sloganInf"><a href="">
                <i class="sloganIcon"></i>
                <span class="sloganText">48元起免运费</span>
            </a></li>
            <li class="sloganInf"><a href="">
                <i class="sloganIcon"></i>
                <span class="sloganText">1000家维修网点 全国联保</span>
            </a></li>
        </ul>
    </section>

    <section id="serviceContainer" class="c">
        <div id="serviceLeft" class="l">
            <ul class="serviceTextBox l">
                <li class="serviceText">购物相关</li>
                <li class="serviceText"><a href="">购物指南</a></li>
                <li class="serviceText"><a href="">配送方式</a></li>
                <li class="serviceText"><a href="">支付方式</a></li>
                <li class="serviceText"><a href="">常见问题</a></li>
            </ul>
            <ul class="serviceTextBox l">
                <li class="serviceText">保修与退换货</li>
                <li class="serviceText"><a href="">购物指南</a></li>
                <li class="serviceText"><a href="">配送方式</a></li>
                <li class="serviceText"><a href="">退换货流程</a></li>
                <li class="serviceText"><a href="">保修状态查询</a></li>
                <li class="serviceText"><a href="">配件防伪查询</a></li>
            </ul>
            <ul class="serviceTextBox l">
                <li class="serviceText">维修与技术支持</li>
                <li class="serviceText"><a href="">购物指南</a></li>
                <li class="serviceText"><a href="">配送方式指南</a></li>
                <li class="serviceText"><a href="">支付方式</a></li>
                <li class="serviceText"><a href="">华为CBG官网</a></li>
                <li class="serviceText"><a href="">上门服务</a></li>
            </ul>
            <ul class="serviceTextBox l">
                <li class="serviceText">特色服务</li>
                <li class="serviceText"><a href="">购物指南</a></li>
                <li class="serviceText"><a href="">配送方式</a></li>
                <li class="serviceText"><a href="">支付方式</a></li>
                <li class="serviceText"><a href="">常见问题</a></li>
            </ul>
            <ul class="serviceTextBox l">
                <li class="serviceText">关于我们</li>
                <li class="serviceText"><a href="">公司介绍</a></li>
                <li class="serviceText"><a href="">配送方式</a></li>
                <li class="serviceText"><a href="">支付方式</a></li>
                <li class="serviceText"><a href="">常见问题</a></li>
                <li class="serviceText"><a href="">华为线下门店</a></li>
                <li class="serviceText"><a href="">荣耀线下门店</a></li>
            </ul>
            <ul class="serviceTextBox l">
                <li class="serviceText">友情链接</li>
                <li class="serviceText"><a href="">购物指南</a></li>
                <li class="serviceText"><a href="">配送方式</a></li>
                <li class="serviceText"><a href="">华为CBG官网</a></li>
                <li class="serviceText"><a href="">常见问题</a></li>
                <li class="serviceText"><a href="">花粉俱乐部</a></li>
            </ul>
        </div>

        <div id="serviceRight" class="r">
            <p id="phoneNum">400-088-6888</p>
            <p class="serviceRightState">7x24小时客服热线（仅收市话费）</p>
            <p id="serviceRightlittleBox"><a href="" title="">
                <i></i><span>在线客服</span>
            </a></p>
            <p class="serviceRightState">
                <span class="l">关注Vmall:</span>
                <a class="serviceRightStateIcon" href="" title=""><i></i></a>
                <a class="serviceRightStateIcon" href="" title=""><i></i></a>
                <a class="serviceRightStateIcon" href="" title=""><i></i></a>
                <a class="serviceRightStateIcon" href="" title=""><i></i></a>
            </p>
        </div>
    </section>

    <section class="c" id="bottomFooter">
        <img src="img/index/bottomLogo_VMALL.png" alt="">

        <div class="l" id="bottomFooterMid">
            <ul class="bottomFooterList" id="bottomFooterListTitle">
                <li id="firstBottomFooterList"><a href="">华为集团</a></li>
                <li><a href="">华为CBG官网</a></li>
                <li><a href="">荣耀官网</a></li>
                <li><a href="">花粉俱乐部</a></li>
                <li><a href="">华为应用市场</a></li>
                <li><a href="">ENUI</a></li>
                <li><a href="">华为终端云空间</a></li>
                <li><a href="">开发者联盟</a></li>
                <li><a href="">华为手机版</a></li>
                <li><a href="">网站地图</a></li>
            </ul>
            <img src="img/index/footerText.png" alt="">
        </div>

        <p id="bottomFooterRight">
            <a href="" title=""><img src="img/index/footer_yinsirengzheng.jpg" alt=""></a>
            <a href="" title=""><img src="img/index/footer_yingyezhizhao.png" alt=""></a>
        </p>

    </section>
</footer>

<section id="fixedMune" class="t">
    <a class="fixedMuneLinks" href="#" title="">
        <i class="fixedMuneTips">购物车</i>
    </a>
    <a class="fixedMuneLinks" href="#" title="">
        <i class="fixedMuneTips">在线客服</i>
    </a>
    <a class="fixedMuneLinks" href="#" title="">
        <i class="fixedMuneTips">意见反馈</i>
    </a>
    <a id="goTop" class="fixedMuneLinks" href="#" title="">
        <i class="fixedMuneTips">返回顶部</i>
    </a>
</section>
</body>
</html>